<template>
  <view class="box" :style="theme">
    <image
      class="box_img"
      mode="widthFix"
      :src="imgHost + '/ic_paysuccess@2x.png'"
    ></image>
    <text class="box_font">购买成功</text>
    <text class="box_fonts">可在个人中心“我的订单”中查看</text>

    <view class="box_btn">
      <view class="box_btn_hui" @click="jump('/pages/index/index', '', 1)"
        ><text>回到首页</text></view
      >
      <view class="box_btn_see" @click="goD"><text>查看订单</text></view>
    </view>
    <view class="mp_boxs" v-if="ordList.length > 0">
      <view class="mp_box">
        <!-- <text
					v-if="currentOrder.itemName==null||currentOrder.itemName==''||currentOrder.itemName==undefined">{{currentOrder.name||'-'}}</text> -->
        <text>{{ currentOrder.name || currentOrder.itemName || "-" }}</text>
        <text>使用时间：{{ currentOrder.validTime || "-" }}</text>
        <view class="code_box_code" :class="{ bottoms: ordList.length == 1 }">
          <canvas
            canvas-id="qrcode"
            style="width: 150px; height: 150px; margin: 0 auto"
          />
        </view>
        <text v-if="ordList.length > 1"
          >共 {{ ordList.length || "-" }} 张劵</text
        >
      </view>
      <view class="next" v-if="ordList.length > 1">
        <image
          class="arrow"
          :class="{ 'arrow-disabled': currentIndex === 0 }"
          @click="currentIndex > 0 ? showPrevOrder() : null"
          mode="widthFix"
          :src="
            imgHost +
            (currentIndex === 0 ? '/ar_left_grey@2x.png' : '/ar_left@2x.png')
          "
        ></image>
        <image
          class="arrow"
          :class="{ 'arrow-disabled': currentIndex === ordList.length - 1 }"
          @click="currentIndex < ordList.length - 1 ? showNextOrder() : null"
          mode="widthFix"
          :src="
            imgHost +
            (currentIndex === ordList.length - 1
              ? '/ar_right_grey@2x.png'
              : '/ar_right@2x.png')
          "
        >
        </image>
        <!-- <image @click="showPrevOrder()" class="next_left" mode="widthFix" :src="imgHost+'/ar_left@2x.png'">
				</image>
				<image mode="widthFix" :src="imgHost+'/ar_left_grey@2x.png'"></image>
				<image  @click="showNextOrder()" class="next_right" mode="widthFix"
					:src="imgHost+'/ar_right@2x.png'">
				</image>
				<image  mode="widthFix" :src="imgHost+'/ar_right_grey@2x.png'"></image> -->
      </view>
    </view>
  </view>
</template>

<script>
import uQRCode from "@/common/uqrcode.js";
export default {
  data() {
    return {
      type: "",
      orderId: "",
      ordList: [],
      businessId: "",
      currentIndex: 0,
      preFlag: false,
    };
  },
  onLoad(ops) {
    this.type = ops.type;
    this.orderId = ops.orderId;
    this.businessId = ops.businessId;
    this.getOrdList(ops.orderId);
    console.log(this.orderId, "orderId");
  },
  computed: {
    currentOrder() {
      return this.ordList[this.currentIndex];
    },
  },
  methods: {
    showPrevOrder() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        this.preFlag = true;
      }
      // this.generateQRCode();
      this.qrFun(this.ordList[this.currentIndex].code);
    },
    showNextOrder() {
      if (this.currentIndex < this.ordList.length - 1) {
        this.currentIndex++;
        this.qrFun(this.ordList[this.currentIndex].code);
      } else {
        this.preFlag = false;
      }
    },
    qrFun: function (text) {
      uni.showLoading({
        title: "加载中...",
      });
      uQRCode.make({
        canvasId: "qrcode",
        componentInstance: this,
        text: text,
        size: 150,
        margin: 0,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: (res) => {
          uni.hideLoading();
        },
      });
    },
    getOrdList(e) {
      this.$app
        .ajax({
          data: {
            param: {
              checkFlag: 1,
              orderId: e,
              // orderId: '03202411281551113722563'
            },
          },
          api: this.$api.paySuCode(),
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.ordList = res.recordList;
            this.qrFun(this.ordList[0].code);
          }
        })
        .catch(() => {});
    },
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jump3(url, params, a) {
      this.$app.jump3(url, params, a);
    },
    goD() {
      this.jump3("/pages/order/list?type=", 0);
      // if(this.type == 1) {
      // 	// this.jump('/pages/order/detail?id=', this.businessId)
      // 	this.jump('/pages/order/list?type=', 0)
      // } else if(this.type == 2) {
      // 	// this.jump('/pages/curriculum/orderDetail?orderId=', this.orderId)
      // 	this.jump('/pages/order/list?type=', 3)
      // } else if(this.type == 3) {
      // 	this.jump('/pages/order/list?type=', 1)
      // } else if(this.type == 4) {
      // 	this.jump('/pages/order/list?type=', 2)
      // } else if(this.type == 5) {
      // 	this.jump('/pages/order/list?type=', 4)
      // }  else if(this.type == 6) {
      // 	this.jump('/pages/member/myActivity')
      // }  else if(this.type == 8) {
      // 	this.jump3('/pages/member/myExchange')
      // }
    },
  },
};
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
.next {
  position: absolute;
  top: 50%;
  width: 80%;
  display: flex;
  justify-content: space-between;

  .next_left {
    left: 0;
  }

  .next_right {
    right: 0;
  }

  image {
    width: 60rpx;
    height: 60rpx;
  }
}

.mp_boxs {
  position: relative;
  width: 90%;
  margin: 20rpx 40rpx;
  margin-top: 50rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp_box {
  display: flex;
  flex-direction: column;
  align-items: center;

  text:nth-child(1) {
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    margin-top: 60rpx;
  }

  text:nth-child(2) {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-top: 16rpx;
    margin-bottom: 40rpx;
  }

  text:nth-child(4) {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-top: 24rpx;
    margin-bottom: 60rpx;
  }
}

.bottoms {
  padding-bottom: 78rpx;
}

.code_box_code {
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 120rpx;
}

.box_img {
  width: 198rpx;
  // height: 220rpx;
}

.box_font {
  font-size: 34rpx;
  font-weight: 600;
  color: #222222;
  margin-top: 20rpx;
}

.box_fonts {
  font-weight: 400;
  font-size: 26rpx;
  color: #999999;
  margin-top: 20rpx;
  margin-bottom: 32rpx;
}

.box_btn {
  // margin-top: 200rpx;
  display: flex;
  align-items: center;
}

.box_btn_hui {
  width: 260rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 50rpx;
  border: 1px solid #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box_btn_hui text {
  font-size: 30rpx;
  font-weight: 400;
  color: #666666;
}

.box_btn_see {
  width: 260rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 50rpx;
  border: 1px solid $color;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 40rpx;
}

.box_btn_see text {
  font-size: 30rpx;
  font-weight: 400;
  color: $color;
}
</style>